<template>
	<view class="confirm-dialog">
		<view class="dialog-box" v-show="dialogShow">
			<view class="dialog">
				<view class="t">
					<view class="t-l">

					</view>
					<view class="title">
						{{title}}
					</view>
					<view class="t-r">
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14"
							height="14" viewBox="0 0 14 14" fill="none" class="close">
							<path
								d="M12.76 0L7 5.76L1.24 0L0 1.24L5.76 7L0 12.76L1.24 14L7 8.24L12.76 14L14 12.76L8.24 7L14 1.24L12.76 0Z"
								fill-rule="evenodd" fill="#999999">
							</path>
						</svg>
					</view>
				</view>
				<view class="b">
					<view class="cont">
						{{cont}}
					</view>
					<view class="btns">
						<view class="btn" @tap="handleBtnTap(item,index)" v-for="(item,index) in btns" :key="index">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "confirm-dialog",
		props: {
			dialogShow: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '标题'
			},
			cont: {
				type: String,
				default: '内容'
			},
			btns: {
				type: Array,
				default () {
					return [{
						text: '确定',
						fnName: '',
						args:[]
					}]
				}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			// 跳转页面
			toPage(path) {
				uni.reLaunch({
					url: path
				});
			},
			// 监听按钮点击
			handleBtnTap(item,index){
				let args = item.args || [];
				this.$emit(item.fnName,...args);
			}
		}
	}
</script>

<style lang="scss">
	.dialog-box {
		position: absolute;
		height: 100vh;
		width: 100%;
		top: 0vw;
		left: 0vw;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;

		.dialog {
			border-radius: 3vw;
			background: #fff;
			display: flex;
			flex-direction: column;
			padding: 4vw;
			width: 68vw;

			.t {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 36rpx;
					font-weight: 700;
					color: rgba(51, 51, 51, 1);
				}
			}

			.b {
				display: flex;
				flex-direction: column;
				align-items: center;
				.cont {
					margin: 5vw 0vw;
					font-size: 28rpx;
					color: rgba(102, 102, 102, 1);
					width: max-content;
				}
				.btns{
					display: flex;
					justify-content: center;
					.btn {
						width: max-content;
						height: max-content;
						padding: 1.5vw 7vw;
						margin: 0vw auto;
						border-radius: 2vw;
						background: rgba(0, 153, 127, 1);
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 0vw 1vw;
					}
				}
				
			}
		}
	}
</style>